/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import router from '@/assets/images/advanceReact/router.png';
import fiberWork from '@/assets/images/advanceReact/fiber_work.png';

import 'highlight.js/styles/atom-one-light.css';
import './index.less';

const { Panel } = Collapse;
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function Fiber() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3']}>
        <Panel header="1、前言" key="1">
          React-Router最基本也是最核心的能力--路由的跳转
          <ul>
            <li>
              BrowserRouter：路由器，比如BrowserRouter和HashRouter。则会根据Route定义出来的映射关系
              为新的路径匹配它对应的逻辑。
            </li>
            <li>Route：路由，比如Route和Switch。负责定义路径与组件之间的映射关系。</li>
            <li>Link：导航，比如Lin，NavLink和Redirect。负责触发路径的改变。</li>
          </ul>
        </Panel>
        <Panel header="2、router" key="2">
          <img src={router} alt="" width="50%" />
          <p>
            当用户刷新页面时，浏览器会默认根据当前URL对资源进行重新定位(发送请求)。
            单页面应用对服务端来说，就是一个URL、一套资源。
            那么如何做到用“不同的URL”来映射不同的视图内容呢?
          </p>
          <p>
            Hash模式：改变 -&gt;<code>window.location.hash = &apos;index&apos; </code>
            <br />
            &emsp;&emsp;&emsp;&emsp;&emsp;感知 -&gt;
            <code>
              window.addEventListener(&apos;hashChange&apos;, (event) =&gt; {'{...}'}, false)
            </code>
          </p>
          <p>
            History模式：改变 -&gt;
            <code>
              window.history.pushState(data,[,title][,url]),window.history.replaceState(data,[,title][,url]){' '}
            </code>
            <br />
            &emsp;&emsp;&emsp;&emsp;&emsp;感知 -&gt;
            <code>
              window.addEventListener(&apos;popstate&apos;, (event) =&gt; {'{...}'}, false)
            </code>
            go、forward 和back等方法的调用确实会触发popstate
            但是pushState和replaceState不会，不过可以自定义事件和全局事件总线来手动触发事件
          </p>
        </Panel>
      </Collapse>
    </div>
  );
}
